<template>
  <div class="ExchEnd">
    <div class="ExchShow" :class="{'show' : show}" @click="openClose"></div>
    <div class="window open"  :class="{'Wshow' : show}">
      <div class="title" v-if="type == 0">{{ $t('aut.稳健型')}}</div>
      <div class="title" v-if="type == 1">{{ $t('aut.激进型')}}</div>

      <div class="input">
        <input name="amount" type="number" v-model="amount" :placeholder="$t('page.jy_num_inp')" placeholder-class="keyteo" />
        <text class="label">USDT/BTC</text>
      </div>
      <div class="radio">
        <div class="rad" v-for="item in one " :key="item.type"
             v-if="item.open == type"
             :class="item.type == check.type ? 'btn-c-lan':'on' "
             @click ="onOpen(item)"
        >
          {{item.type}}
        </div>
      </div>
<!--      {{type}}\{{oid}}-->
      <div class="conter">{{ $t('aut.投注金额为')}}：{{check.conter}}</div>

      <div class="f-btn">
        <div class="btn-border">
          <button class="sub" @click="openClose">{{$t('page.Cancel')}} </button>
        </div>
        <div class="btn-border">
          <button class="sub on"  @click="onSubmit">{{$t('page.Revise')}}</button>
        </div>
      </div>

    </div>
  </div>

</template>

<script>
import {Toast} from "vant";
import {mapState} from "vuex";
import store from "@/store";

export default {
  name: "ExchOrder",
  props:{
    type:[Number],
    oid:[String]
  },
  computed: {
    ...mapState({
      user: state => state.user,
    })
  },
  data(){
    return{
      show:true,
      amount:'',
      check:{open:0,type:5, conter:'5000-29999', min:5000,max:29999},
      balance:0,
      one:[
        {open:0,type:5, conter:'5000-29999', min:5000,max:29999},
        {open:0,type:10, conter:'30000-299999', min:30000,max:299999},
        {open:0,type:30, conter:'300000-499999', min:300000,max:499999},
        {open:0,type:50, conter:'500000-999999', min:500000,max:999999},

        {open:1,type:100, conter:'1000000-2999999' ,min:1000000,max:2999999},
        {open:1,type:125, conter:'300W ~ 499.99W',min:3000000,max:4999999},
        {open:1,type:150, conter:'500W  ~ 999.99W',min:5000000,max:9999999},
        {open:1,type:200, conter:'1000W ~ ∞',min:10000000,max:9999999999999999999999999999},
      ]
    }
  },
  mounted() {

    this.UserInfo();

    if(this.type == 0){
     this.check = this.one[0];
    }else {
      this.check = this.one[4];
    }
  },
  methods:{
    onOpen(item){
      console.log(item)
      this.check = item;
      this.$forceUpdate();
    },

    async UserInfo() {
      const {err,res} = await this.$request.get("/chss/user/basic_info", {
        address: this.$dapp.getAddress(),
      });
      if (err === null) {
        store.commit('updateUser', res);
        console.log(res)
        this.balance =res.balance;
      }
    },
    openClose(){
      this.show = false;
      setTimeout(()=>{
        this.$emit("close");
      },1000)
    },
    async onSubmit(){
      this.$emit('gddocu', 555)
      var balance = this.balance;
      var min = this.check.min;
      var max = this.check.max;
      if(this.amount > balance){
        this.$toast.fail(this.$t("aut.余额不足"))
        return
      }else if(this.amount < min || this.amount > max){
        this.$toast.fail(this.check.type + this.$t("aut.倍交易投注金额为") + this.check.conter)
        return
      }

      const {err,res} = await this.$request.post("/chss/userTrasaction/trade", {
        address: this.$dapp.getAddress(),
        order_number: this.oid,
        amount:this.amount,
        multiple : this.check.type
      });
      if (err === null) {
        Toast.success(this.$t('tis.gdSuccess'))
        console.log("跟单成功！")

        this.$emit('gddocu', res.chance_left)
        this.openClose();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ExchShow{
  position: fixed; z-index: 98;
  top: 0px; left: 0px;
  background: rgba(0,0,0,0.5);
  width: 100%; height: 100%;
  -webkit-animation: Show 0.6s linear 1; /* Chrome, Safari, Opera */
  animation: Show 0.6s linear 1;

  opacity: 0; transform:scale(1.2);
  transition: all 1S;
}

.ExchShow.show{
  opacity: 1; transform:scale(1)
}
@keyframes Show{
  0%{opacity: 0; transform:scale(1.2) }
  100%{opacity: 1; transform: scale(1)}
}

.window{
  position: fixed; z-index: 99;
  top: 50%; left: 50%;
  opacity: 0;
  transform: translate(-50% , -50%) scale(1.2);
  transition: all 1S;
  -webkit-animation: Wshow 0.6s linear 1; /* Chrome, Safari, Opera */
  animation: Wshow 0.6s linear 1;
}
.window.Wshow{
  opacity: 1;
  transform: translate(-50% , -50%)  scale(1);
}

@keyframes Wshow{
  0%  {opacity: 0; transform:translate(-50% , -50%) scale(1.2);}
  100%{opacity: 1; transform:translate(-50% , -50%) scale(1)}
}

.window{
  background: #20283d;
  padding: 30px; width: 600px; box-sizing: border-box;
  border-radius: 30px;

}
.title{text-align: center;}
.input{
  height: 90px; line-height: 90px;
  border-radius: 50px; border: 2px solid #2c395d;
  display: flex; margin: 40px 0px;

  .keyteo{color: #496296; font-size: 30px; }

  input{ font-size: 28px; width: 100%;
    background: transparent; border:none;height: 100%; text-align: left; padding: 0px 30px;
    box-sizing: border-box;
  }
  .iconfont{height: 50px; line-height: 50px; margin: 20px 20px; font-size: 50px;}
  .label{padding: 0px 30px;color: #496296; font-size: 28px; }

}

.radio{
  .rad{display: inline-block; text-align: center;
    height:50px; line-height: 50px;  margin: 10px 1%;
    width: 23%; border-radius: 30px; overflow: hidden;

    &.btn-c-lan{color:#333;}
    &.on{
      border: 3px solid #49edff; box-sizing: border-box;
    }
  }
}
.conter{
  margin: 10px auto;
}

.f-btn{
  margin-top:30px;
  display: flex; justify-content:space-between; padding: 20px 0px;

  .btn-border{
    width:45%;
    padding: 2px; box-sizing: border-box;
    border-radius: 35px;
    background: -moz-linear-gradient(#59e4f2 , #1d65cd);
    background: -webkit-linear-gradient(#59e4f2 , #1d65cd);
    background: -o-linear-gradient(#59e4f2 , #1d65cd);
    background: -ms-linear-gradient(#59e4f2 , #1d65cd);
    background: linear-gradient(#59e4f2 , #1d65cd);
  }

  .sub{
    font-size: 25px;
    height: 60px; line-height: 60px;  border-radius: 35px;
    background: #2c395d;
    color: #FFF; width: 100%;
    border:none;

    &.on{
      background: -moz-linear-gradient(to top right ,#1368f8 , #5ef2ff);
      background:  -webkit-linear-gradient(to top right ,#1368f8 , #5ef2ff);
      background: -o-linear-gradient(to top right  #1368f8 , #5ef2ff);
      background:  -ms-linear-gradient(to top right ,#1368f8 , #5ef2ff);
      background:  linear-gradient(to top right ,#1368f8 , #5ef2ff);
      color: #333;
    }
  }
}



</style>
